<template>
    <div class="app-container">
      <!--    地图-->
      <div class="map_content" id="container"></div>
      <!--    内容-->
      <div class="content">
        <div class="cont_top">
          <div class="cont_state"><img src="@/assets/image/stale1.png"><span>正常</span></div>
          <div class="cont_state"><img src="@/assets/image/stale2.png"><span>告警</span></div>
          <div class="cont_state"><img src="@/assets/image/stale3.png"><span>离线</span></div>
        </div>
        <!--      设备总览-->
        <div class="cont1">
          <div  class="conts1">
            <div class="cont1_title">设备总览<span>总数：{{ num }}</span></div>
            <div class="cont1_texts" >
              <div class="cont1_text" v-for="item in deviceList">
                <div>{{ item.name }}</div>
                <div class="cont1_num"><span>{{ item.value }}</span></div>
              </div>
            </div>
          </div>
        </div>
        <!--      设备列表-->
        <div class="cont2">
          <div class="conts2">
            <!--              设备搜索-->
            <div>
              <el-select size="mini" style="width: 70%;margin-right: 5%;" v-model="value" filterable clearable placeholder="请选择" @clear="onClear">
                <el-option
                    v-for="item in originalList"
                    :key="item.deviceId"
                    :label="item.deviceName"
                    :value="item.deviceName">
                </el-option>
              </el-select>
              <el-button type="primary" size="mini" @click="seachs" style="background: #00B8B8;border: none;color: white;">搜索</el-button>
            </div>
            <!--              设备列表-->
            <ul class="cont2_ul">
              <li style="margin-bottom: 5px;" v-for="(item, i) in celist" :key="i" @click="devdail(item)">
                <div class="cont2_list">
                  <span class="cont2_text">{{ item.deviceName }}</span>
                  <span>{{ item.devType }}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--      右边三个框-->
        <div class="content_right">
          <!--        告警列表-->
          <div class="cont3">
            <div class="conts3">
              <div class="cont3_title" >告警列表</div>
              <div class="cont3_text"></div>
            </div>
          </div>
          <!--        30天告警统计-->
          <div class="cont4">
            <div class="conts4">
              <div class="cont4_title">30天告警统计</div>
              <div id="main" style="width: 100%;height:160px;"></div>
            </div>
          </div>
          <!--      告警统计-->
          <div class="cont1" style="display: inline-block;vertical-align: middle">
            <div  class="conts1">
              <div class="cont1_title">告警统计</div>
              <div class="cont1_texts">
                <div class="cont1_text">
                  <div>告警总数</div>
                  <div class="cont1_num"><span>1</span></div>
                </div>
                <div class="cont1_text">
                  <div>属性告警</div>
                  <div class="cont1_num"><span>1</span></div>
                </div>
                <div class="cont1_text">
                  <div>传感器告警</div>
                  <div class="cont1_num"><span>0</span></div>
                </div>
                <div class="cont1_text">
                  <div>已处理</div>
                  <div class="cont1_num"><span>1</span></div>
                </div>
                <div class="cont1_text">
                  <div>待处理</div>
                  <div class="cont1_num"><span>0</span></div>
                </div>
                <div class="cont1_text">
                  <div>处理率</div>
                  <div class="cont1_num"><span>100</span>%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { BMPGL } from '@/utils/bmpgl'
  import { getMapDevAll, getMapDevCount, getMapLineChart } from '@/api/dev/index'
  export default {
    name: "DevIndex",
    components: {},
    data(){
      return {
        deviceList: '', //设备总览
        num: '',
        map: null,
        maplist: [], // 地图里的设备列表
        originalList: [], //搜索下拉框的设备列表
        celist: [], //设备列表
        value: '',//搜索框双向绑定的值
      }
    },
    props: {},
    watch: {},
    created() {
      this.getDevCount()
      this.getDevList()
      this.initMap()
    },
    mounted() {
      this.chartA()
    },
    destroyed() {
      this.map.destroy()
    },
    methods: {
      initMap () {
        this.$nextTick(() => {
          BMPGL('7GulsMwyadV9o5pyZjg74Pt83ATV5A4U').then((BMapGL) => {
            const map = new BMapGL.Map('container', { enableMapClick: false })
            this.map = map
            map.disableKeyboard() // 禁用键盘操作地图
            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
            // 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏
            const point = new BMapGL.Point(108.953509,34.265619)
            map.centerAndZoom(point, 15)
          })
        })
      },
      getDevList() {
        getMapDevAll().then((res) => {
          this.celist = res.data
          this.originalList =res.data
          this.maplist = res.data
          var htmls = '' // 文字标注label
          var windowhtml = '' //弹窗文字
          this.maplist.forEach((item,index) => {
            if(item.devType =='正常'){
              // 图形标注点坐标
              var pt = new BMapGL.Point(item.longitude, item.latitude)
              var myIcon = new BMapGL.Icon(require('@/assets/image/stale1.png'), new BMapGL.Size(30, 50)) // 定义自己的标注
              var marker = new BMapGL.Marker(pt, { icon: myIcon })
              this.map.addOverlay(marker); //坐标标注图插入
  
              // 创建文本标注对象
              var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-60, -170) // 设置文本偏移量
              }
              htmls = `<p style="margin-bottom: 3px;">${ item.deviceName}</p>
                     <ul>${item.data.map(item => {
                return `<li style="margin-bottom: 3px;">${item.channelName}&nbsp;&nbsp;${item.value}</li>`}).join('')}
                     </ul>
                     <p>${ item.time}</p>`
              var label = new BMapGL.Label(htmls, labelopts)
              label.setStyle({
                color: '#fff',
                width: '130px',
                height: '140PX',
                fontSize: '12px',
                backgroundColor: '#00B8B8',
                border: '0',
                borderRadius: '3px',
                padding: '8px',
                display: 'none'
              })
              marker.setLabel(label);
              marker.addEventListener("mouseover", function(e) {
                var label = this.getLabel()
                label.setStyle({ display: "block" });
              });
              marker.addEventListener("mouseout", function(e) {
                var label = this.getLabel()
                label.setStyle({ display: "none" });
              });
              this.map.addOverlay(label) //文本标注插入
  
              //  创建信息窗口
              var opts = {
                width: 300, // 信息窗口宽度
                height: 150, // 信息窗口高度
                title: item.deviceName + '&nbsp;&nbsp;' +item.devType + '&nbsp;&nbsp;'+ '电量'+ item.electricity + '%', // 信息窗口标题
              };
              // <p>${item.deviceName}&nbsp;&nbsp;${item.devType}&nbsp;&nbsp;电量${item.electricity}%</p>
              windowhtml = `<div>
                          <table border="1" style="text-align: center;">
                            <tr style="background: #00B8B8;color: #FFFFFF;">
                              <th style="width: 70px;">通道名称</th>
                              <th style="width: 70px;">通道值</th>
                              <th style="width: 50px;">状态</th>
                              <th style="width: 70px;">历史数据</th>
                            </tr>
                            ${item.data.map(items => {
                return`<tr>
                                     <td>${items.channelName}</td>
                                     <td>${items.value}</td>
                                     <td>${items.channelStatus==1? '开启': '关闭'}</td>
                                     <td><a style="color: #00B8B8" href="list.vue#/record/history/?id=${item.deviceId}&idName=${item.deviceName}&channel=${items.channel}&channelName=${items.channelName}">查看</a></td>
                                     </tr>`
              }).join('')}
                          </table>
                          <p>${ item.time}</p>
                          </div>`
              var infoWindow = new BMapGL.InfoWindow(windowhtml, opts); // 创建信息窗口对象
              // this.map.openInfoWindow(infoWindow, point); //打开信息窗口
              //监听事件
              marker.addEventListener("click", function (e) {
                this.map.openInfoWindow(infoWindow, pt);
              });
            }
            else if (item.devType =='离线' || item.devType =='未激活'){
              // 图形标注点坐标
              var pt = new BMapGL.Point(item.longitude, item.latitude)
              var myIcon = new BMapGL.Icon(require('@/assets/image/stale3.png'), new BMapGL.Size(30, 50)) // 定义自己的标注
              var marker = new BMapGL.Marker(pt, { icon: myIcon })
              this.map.addOverlay(marker); //坐标标注图插入
  
              // 创建文本标注对象
              var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-60, -170) // 设置文本偏移量
              }
              htmls = `<p style="margin-bottom: 3px;">${ item.deviceName}</p>
                     <ul>${item.data.map(item => {
                return `<li style="margin-bottom: 3px;">${item.channelName}&nbsp;&nbsp;${item.value}</li>`}).join('')}
                     </ul>
                     <p>${ item.time}</p>`
              var label = new BMapGL.Label(htmls, labelopts)
              label.setStyle({
                color: '#fff',
                width: '130px',
                height: '140PX',
                fontSize: '12px',
                backgroundColor: '#00B8B8',
                border: '0',
                borderRadius: '3px',
                padding: '8px',
                display: 'none'
              })
              marker.setLabel(label);
              marker.addEventListener("mouseover", function(e) {
                var label = this.getLabel()
                label.setStyle({ display: "block" });
              });
              marker.addEventListener("mouseout", function(e) {
                var label = this.getLabel()
                label.setStyle({ display: "none" });
              });
              this.map.addOverlay(label) //文本标注插入
  
              //  创建信息窗口
              var opts = {
                width: 300, // 信息窗口宽度
                height: 150, // 信息窗口高度
                title: item.deviceName + '&nbsp;&nbsp;' +item.devType + '&nbsp;&nbsp;'+ '电量'+ item.electricity + '%', // 信息窗口标题
              };
              // <p>${item.deviceName}&nbsp;&nbsp;${item.devType}&nbsp;&nbsp;电量${item.electricity}%</p>
              windowhtml = `<div>
                          <table border="1" style="text-align: center;">
                            <tr style="background: #00B8B8;color: #FFFFFF;">
                              <th style="width: 70px;">通道名称</th>
                              <th style="width: 70px;">通道值</th>
                              <th style="width: 50px;">状态</th>
                              <th style="width: 70px;">历史数据</th>
                            </tr>
                            ${item.data.map(items => {
                return`<tr>
                                     <td>${items.channelName}</td>
                                     <td>${items.value}</td>
                                     <td>${items.channelStatus==1? '开启': '关闭'}</td>
                                     <td><a style="color: #00B8B8" href="list.vue#/record/history/?id=${item.deviceId}&idName=${item.deviceName}&channel=${items.channel}&channelName=${items.channelName}">查看</a></td>
                                     </tr>`
              }).join('')}
                          </table>
                          <p>${ item.time}</p>
                          </div>`
              var infoWindow = new BMapGL.InfoWindow(windowhtml, opts); // 创建信息窗口对象
              // this.map.openInfoWindow(infoWindow, point); //打开信息窗口
              //监听事件
              marker.addEventListener("click", function (e) {
                this.map.openInfoWindow(infoWindow, pt);
              });
            }
            else if(item.devType == '告警'){
              // 图形标注点坐标
              var pt = new BMapGL.Point(item.longitude, item.latitude)
              var myIcon = new BMapGL.Icon(require('@/assets/image/stale2.png'), new BMapGL.Size(30, 50)) // 定义自己的标注
              var marker = new BMapGL.Marker(pt, { icon: myIcon })
              this.map.addOverlay(marker); //坐标标注图插入
  
              // 创建文本标注对象
              var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(-60, -170) // 设置文本偏移量
              }
              htmls = `<p style="margin-bottom: 3px;">${ item.deviceName}</p>
                     <ul>${item.data.map(item => {
                return `<li style="margin-bottom: 3px;">${item.channelName}&nbsp;&nbsp;${item.value}</li>`}).join('')}
                     </ul>
                     <p>${ item.time}</p>`
              var label = new BMapGL.Label(htmls, labelopts)
              label.setStyle({
                color: '#fff',
                width: '130px',
                height: '140PX',
                fontSize: '12px',
                backgroundColor: '#00B8B8',
                border: '0',
                borderRadius: '3px',
                padding: '8px',
                display: 'none'
              })
              marker.setLabel(label);
              marker.addEventListener("mouseover", function(e) {
                var label = this.getLabel()
                label.setStyle({ display: "block" });
              });
              marker.addEventListener("mouseout", function(e) {
                var label = this.getLabel()
                label.setStyle({ display: "none" });
              });
              this.map.addOverlay(label) //文本标注插入
  
              //  创建信息窗口
              var opts = {
                width: 300, // 信息窗口宽度
                height: 150, // 信息窗口高度
                title: item.deviceName + '&nbsp;&nbsp;' +item.devType + '&nbsp;&nbsp;'+ '电量'+ item.electricity + '%', // 信息窗口标题
              };
              // <p>${item.deviceName}&nbsp;&nbsp;${item.devType}&nbsp;&nbsp;电量${item.electricity}%</p>
              windowhtml = `<div>
                          <table border="1" style="text-align: center;">
                            <tr style="background: #00B8B8;color: #FFFFFF;">
                              <th style="width: 70px;">通道名称</th>
                              <th style="width: 70px;">通道值</th>
                              <th style="width: 50px;">状态</th>
                              <th style="width: 70px;">历史数据</th>
                            </tr>
                            ${item.data.map(items => {
                return`<tr>
                                     <td>${items.channelName}</td>
                                     <td>${items.value}</td>
                                     <td>${items.channelStatus==1? '开启': '关闭'}</td>
                                     <td><a style="color: #00B8B8" href="list.vue#/record/history/?id=${item.deviceId}&idName=${item.deviceName}&channel=${items.channel}&channelName=${items.channelName}">查看</a></td>
                                     </tr>`
              }).join('')}
                          </table>
                          <p>${ item.time}</p>
                          </div>`
              var infoWindow = new BMapGL.InfoWindow(windowhtml, opts); // 创建信息窗口对象
              // this.map.openInfoWindow(infoWindow, point); //打开信息窗口
              //监听事件
              marker.addEventListener("click", function (e) {
                this.map.openInfoWindow(infoWindow, pt);
              });
            }
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      // 点击设备名
      devdail(item){
        console.log(item)
        // if (this.map) {
        this.map.centerAndZoom(new BMapGL.Point(item.longitude, item.latitude), 18);
        // }
      },
      // 搜索
      seachs() {
        if (!this.value) {
          // 数据保持不变
          this.$message.warning('搜索内容不可为空')
        } else {
          let alreadyFindItem = this.originalList.find(item => item.deviceName == this.value)
          this.celist = []
          this.celist.push(alreadyFindItem)
        }
      },
      // 清空搜索框
      onClear() {
        this.celist = this.originalList
        // 在这里添加您需要的逻辑代码
      },
      // 设备总览
      getDevCount() {
        getMapDevCount().then((res) => {
          console.log(res)
          this.deviceList = res.data
          this.num = res.data[0].value
        }).catch((err) => {
          // console.log(err)
        })
      },
      //  30天告警统计
      chartA() {
        const myChart = this.$echarts.init(document.getElementById('main'))  // 先获得这个dom元素并初始化
        // 指定图表的配置项和数据
        myChart.setOption({
          backgroundColor:'rgba(50, 50, 50, 0.5)',
          // 指示线
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: "#00B8B8"
              }
            }
          },
          // 折线颜色
          color: ['#00B8B8'],
          // 图表距离容器距离
          grid: {
            left: '2%',
            right: '2%',
            top: '5%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [{
            show: true,
            type: 'category',
            // 隐藏横向网格线
            splitLine: {
              show: false
            },
            data: ['2001/04/05 00:00:00', '2001/04/05 00:00:00', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010'],
            // x轴字体设置
            axisLabel: {
              show: false
              // interval: 0,
              // rotate: 60, //倾斜角度
              // color: '#00B8B8',
            },
            // 横坐标刻度线
            axisTick: {
              show: false
            },
            // 坐标轴
            axisLine: {
              lineStyle: {
                color: '#d5d1d1',
              }
            },
            // y轴与坐标轴线对齐
            boundaryGap: true,
          }],
          yAxis: [{
            // name: '(mA)',
            type: 'value',
            // min: 0,
            // max: 250,
            // y轴字体设置
            axisLabel: {
              color: '#00B8B8',
            },
            // y轴线条
            axisLine: {
              lineStyle: {
                color: '#00B8B8',
              }
            },
            // 刻度线
            axisTick: {
              show: true
            },
            // 网格线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#747272',
              }
            }
          }],
          series: [
            {
              name: '属性告警',
              type: 'line',
              smooth: true,
              symbolSize: 3,
              data: ['40', '80', '50', '170', '70', '100', '80', '180', '40', '10'],
            },
            {
              name:'传感器告警',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 3,
              itemStyle: {
                color: '#ffc500',
                borderColor: "#fff",
                borderWidth: 1,
              },
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
            },
            // {
            //   name:'传感器预警',
            //   type: 'line',
            //   smooth: true,
            //   symbol: 'circle',
            //   symbolSize: 3,
            //   itemStyle: {
            //     color: '#ff5b29',
            //     borderColor: "#fff",
            //     borderWidth: 1,
            //   },
            //   data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
            // }
          ]
        });
        getMapLineChart().then((res) => {
          console.log(res)
          const time = res.data.time
          const number1 = res.data.value1
          const number2 = res.data.value2
          myChart.setOption({
            backgroundColor:'rgba(50, 50, 50, 0.5)',
            // 指示线
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                lineStyle: {
                  color: "#00B8B8"
                }
              }
            },
            // 折线颜色
            color: ['#00B8B8'],
            // 图表距离容器距离
            grid: {
              left: '2%',
              right: '2%',
              top: '5%',
              bottom: '5%',
              containLabel: true
            },
            xAxis: [{
              show: true,
              type: 'category',
              // 隐藏横向网格线
              splitLine: {
                show: false
              },
              data: time,
              // x轴字体设置
              axisLabel: {
                show: false
                // interval: 0,
                // rotate: 60, //倾斜角度
                // color: '#00B8B8',
              },
              // 横坐标刻度线
              axisTick: {
                show: false
              },
              // 坐标轴
              axisLine: {
                lineStyle: {
                  color: '#d5d1d1',
                }
              },
              // y轴与坐标轴线对齐
              boundaryGap: true,
            }],
            yAxis: [{
              // name: '(mA)',
              type: 'value',
              // min: 0,
              // max: 250,
              // y轴字体设置
              axisLabel: {
                color: '#00B8B8',
              },
              // y轴线条
              axisLine: {
                lineStyle: {
                  color: '#00B8B8',
                }
              },
              // 刻度线
              axisTick: {
                show: true
              },
              // 网格线
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#747272',
                }
              }
            }],
            series: [
              {
                name: '属性告警',
                type: 'line',
                smooth: true,
                symbolSize: 3,
                data: number1,
              },
              {
                name:'传感器告警',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 3,
                itemStyle: {
                  color: '#ffc500',
                  borderColor: "#fff",
                  borderWidth: 1,
                },
                data: number2
              }
            ]
          });
        }).catch((err) => {
          console.log(err)
        })
      },
    }
  }
  </script>
  
  <style lang="less" scoped>
  .app-container {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background: #F5F7F9;
    position: relative;
    border-radius: 10px;
    .map_content {
      width: 100%;
      height: 100%;
      position:absolute;
      border-radius: 10px;
    }
    // 内容
    .content {
      z-index: 999;
      position:absolute;
      left: 20px;
      top: 20px;
      // 按钮
      .cont_top {
        position:absolute;
        left: 300px;
        top: 5px;
        width: 200px;
        background: #FFFFFF;
        display: flex;
        padding: 5px;
        .cont_state {
          display: flex;
          align-items: center;
          margin-right: 10px;
          img {
            width: 21px;
            height: 24px;
          }
        }
      }
      // 设备总览
      .cont1 {
        width: 290px;
        background-color: rgba(0,29,35,0.7);
        border-radius: 5px;
        padding: 15px 0px;
        .conts1 {
          width: 245px;
          margin: 0px auto;
          .cont1_title {
            color: white;
            // border-bottom: 2px solid #00B8B8;
            span {
              font-size: 12px;
              margin-left: 15px;
            }
          }
          .cont1_texts{
            .cont1_text {
              width: 63px;
              height: 68px;
              font-size: 12px;
              color: #fff;
              padding: 5px;
              margin: 10px 3px 0px;
              display: inline-block;
              border: 1px solid #00B8B8;
              border-radius: 5px;
              .cont1_num {
                span {
                  font-size: 28px;
                  font-family: acens;
                  color: #00B8B8;
                }
              }
            }
          }
        }
      }
      // 设备搜索
      .cont2{
        width: 290px;
        background-color: rgba(0, 29, 35, 0.7);
        border-radius: 5px;
        padding: 5px 0px;
        margin-top: 20px;
        // 搜索框
        ::v-deep .el-input__inner {
          margin-top: 10px;
          background: #041C21;
          border-radius: 4px;
          border: 1px solid rgba(0,231,231,0.502);
          color: #ffffff;
          &::placeholder {
            color: #999999;
          }
        }
        .conts2 {
          width: 245px;
          margin: 0px auto;
          font-family: 微软雅黑;
          font-size: 12px;
          .cont2_ul {
            margin-top: 15px;
            color: #fff;
            min-height: 40vh;
            overflow-y: scroll;
            padding-left: 0;
            li{
              list-style: none;
            }
            .cont2_list {
              background: rgba(10, 39, 50,0.5);
              padding: 5px;
              //position: relative;
              cursor: pointer;
              .cont2_text {
                margin-left:15px;
                width: 70%;
                display: inline-block;
                vertical-align: bottom;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
      //  右边三个框
      .content_right{
        position:absolute;
        left: 300px;
        bottom: 30px;
        width: 1400px;
        height: 209px;
        //  告警列表
        .cont3 {
          background-color: rgba(0, 29, 35, 0.7);
          border-radius: 5px;
          padding: 15px 0px;
          width: 380px;
          height: 209px;
          margin-right: 10px;
          margin-left: 10px;
          display: inline-block;
          vertical-align: middle;
          .conts3 {
            width: 365px;
            margin: 0px auto;
            .cont3_title {
              color: white;
              // border-bottom: 2px solid #00B8B8;
            }
            .cont3_text {
              height: 160px;
            }
          }
        }
        //  30天告警统计
        .cont4 {
          background-color: rgba(0, 29, 35, 0.7);
          border-radius: 5px;
          padding: 15px 0px;
          width: 600px;
          height: 209px;
          margin-left: 10px;
          margin-right: 10px;
          display: inline-block;
          vertical-align: middle;
          .conts4 {
            width: 90%;
            margin: 0px auto;
            .cont4_title {
              color: white;
              padding-bottom: 10px;
              // border-bottom: 2px solid #00B8B8;
            }
          }
        }
        .cont1{
          margin-left: 10px;
          height: 209px;
        }
      }
    }
  }
  ::v-deep .anchorBL {
    display: none;
  }
  </style>
  